<template>
  <div>
    <the-header-top></the-header-top>
    <logo-bar></logo-bar>
    <div class="pay">
      <div class="pay-containter">
        <div class="pay-bank">
          <div class="pay-bank-title">
            <span></span>
            {{$t('message.choosePayBank')}}
          </div>
          <div class="pay-title">
            <div class="pay-title-price">
              {{$t('message.sum')}}：<span>{{ $t('message.currencySymbol') }}&nbsp;{{ payResult.goodsPrice }}</span>
            </div>
            <div class="pay-title-number">
             {{$t('message.transationNumber')}} ：{{ payResult.orderNumber }}
            </div>
          </div>
          <div class="pay-bank-content">
            <!-- <div class="pay-bank-group" v-for="(value, key) in brankList">
              <div v-if="key == 'bank'" class="pay-bank-group-title">{{$t('message.payBank')}}</div>
              <div v-else class="pay-bank-group-title">{{$t('message.payThirdpart')}}</div>
              <ul>
                <li v-for="(item, index) in value" :class="{ 'no-margin-right': index % 4 === 3 }">
                  <div class="pay-bank-img" :class="{ 'pay-bank-select': bank === index && bankTpye === key}" @click="selectBank(key, index)">
                    <img :src="item.logo" :title="item.name"/>
                  </div>
                </li>
              </ul>
            </div> -->
            <div class="pay-bank-group">
              <div class="pay-bank-group-title">{{$t('message.payBank')}}</div>
              <ul>
                <li v-for="(item, index) in brankList.bank" :class="{ 'no-margin-right': index % 4 === 3 }" :key="index">
                  <div class="pay-bank-img" :class="{ 'pay-bank-select': bank === index && bankTpye === 'bank' }" @click="selectBank('bank', index)">
                    <img :src="item.logo" :title="item.name"/>
                  </div>
                </li>
              </ul>
            </div>
            <div class="pay-bank-group">
              <div class="pay-bank-group-title">
                {{$t('message.payThirdpart')}}
                <span style="color:red">{{$t('message.payThirdpartRemarks')}}</span>
              </div>
              <ul>
                <li v-for="(item, index) in brankList.thirdpart" :class="{ 'no-margin-right': index % 4 === 3 }" :key="index">
                  <div class="pay-bank-img" :class="{ 'pay-bank-select': bank === index && bankTpye === 'thirdpart' }" @click="selectBank('thirdpart', index)">
                    <img :src="item.logo" :title="item.name"/>
                  </div>
                </li>
              </ul>
            </div>
            <div v-html="returnFormData"></div>
          </div>
          <div class="pay-bank-btn">
            <button type="button" :disabled="isButtonDisable" @click="onPay">{{$t('message.toBankPay')}}</button>
          </div>
        </div>
      </div>
    </div>
    <pay-dialog v-if="isShowDialog" @on-close="closeDialog" :gateway-id="gatewayId" :gateway-name="gatewayName" :order-id="payResult.orderNumbers" :order-id-real="payResult.orderId" :type="type"></pay-dialog>
  </div>
</template>

<script>
  import TheHeaderTop from '@/components/base/TheHeaderTop'
  import PayDialog from '@/components/pay/PayDialog'
  import LogoBar from '@/components/base/LogoBar'
  import { getCookie } from '@/util/util'

  export default {
    name: 'Pay',
    components: {
      TheHeaderTop,
      PayDialog,
      LogoBar
    },
    data () {
      return {
        returnFormData: '',
        gatewayName: '',
        gatewayId: '',
        bank: null,
        bankTpye: null,
        isButtonDisable: true,
        isShowDialog: false,
        brankList: [],
        payResult: {
          goodsPrice: '',
          orderNumber: ''
        }
      }
    },
    computed: {
      type () {
        return parseInt(this.$route.query.type) || 1
      }
    },
    created () {
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      this.$ajax.getPayGateway().then((res) => {
        if (res.code === 200) {
          this.brankList = res.data
        } else {
          console.log('获取失败')
        }
      })
      // 解决服务器支付页面空白方法
      var t
      this.timers = setInterval(() => {
        // t = window.sessionStorage.getItem('payResult')
        t = getCookie('payResult')
        if (t) {
          this.payResult = JSON.parse(t)
          if (this.payResult.type) {
            this.payResult.orderNumbers = this.payResult.orderId
          } else {
            this.payResult = JSON.parse(t)
            this.payResult.orderNumbers = this.payResult.orderNumber
          }
          clearInterval(this.timers)
        }
      }, 100)
    },
    methods: {
      selectBank (bankType, index) {
        this.bankTpye = bankType
        this.bank = index
        this.isButtonDisable = false
        this.getFormDate(bankType, index)
      },
      getFormDate (bankType, index) {
        // 获取支付类型
        var type = parseInt(this.$route.query.type)
        // 根据支付类型使用不同的回调url
        var succAddr = ''
        var failAddr = ''
        var allowRequestPay = false
        if (type === 1) {
          succAddr = '/pay/success'
          failAddr = `/personal/order/detail?orderId=${this.payResult.orderNumber}`
          allowRequestPay = true
        } else if (type === 2) {
          succAddr = '/pay/success?type=bill'
          failAddr = `/personal/bill/detail?orderId=${this.payResult.orderNumber}`
          allowRequestPay = true
        } else {
          alert(this.$t('message.payInfoNotFound'))
        }
        // 若获取到支付类型信息，才允许调用接口
        if (allowRequestPay) {
          this.$ajax.requestPay({
            order_num_md5: this.payResult.orderNumber,
            gateway_name: this.brankList[bankType][index].gateway_name,
            stages_one: this.payResult.startNumber,
            stages_end: this.payResult.endNumber,
            pay_success_return_url: succAddr,
            pay_cancel_return_url: failAddr
          }).then((res) => {
            if (res.code === 200) {
              this.returnFormData = res.data.form_code
              this.gatewayName = res.data.gateway_name
              this.gatewayId = res.data.gateway_order_id
            } else {
              console.log('获取失败')
            }
          })
        }
      },
      onPay () {
        let payForm = document.getElementById('GHL_pay_form')
        if (payForm) {
          document.getElementById('GHL_pay_form').submit()
          this.isShowDialog = true
        } else {
          this.$store.commit('alert', {
            switch: true,
            alertText: this.$t('message.failToGetPrepayInfo')
          })
        }
      },
      closeDialog () {
        this.isShowDialog = false
      }
    }
  }
</script>

<style scoped>
  .pay {
    background: #F5F5F5;
    min-width: 1200px;
    padding: 40px 0;
  }

  .pay-containter {
    width: 1200px;
    margin: 0 auto;
  }

  .pay-title {
    font-size: 14px;
    margin-top: 24px;
  }

  .pay-bank-group-title{
    font-size: 16px;
    padding: 10px 0;
  }

  .pay-title-price {
    float: left;
    color: #666;
  }

  .pay-title-price > span {
    color: #FF600A;
  }

  .pay-title-number {
    float: right;
    color: #666;
  }

  .pay-bank {
    box-sizing: border-box;
    padding: 0 40px;
    background: #fff;
    width: 1200px;
    /*border: 1px solid #ccc;*/
  }

  .pay-bank-title {
    font-size: 18px;
    color: #333333;
    height: 89px;
    line-height: 89px;
    border-bottom: 1px solid #E6E6E6;
    /*padding-left: 22px;*/
    /*letter-spacing: 1px;*/
  }

  .pay-bank-title span {
    margin-right: 10px;
    display: inline-block;
    background: #FF600A;
    width: 4px;
    height: 18px;
    position: relative;
    top: 3px;
  }

  .pay-bank-content {
    /*background-color: #fff;*/
    /*padding: 25px 63px 58px;*/
    /*overflow: hidden;*/
    padding-top: 60px;
  }

  .pay-bank-group {

  }

  .pay-bank-group ul {
    overflow: hidden;
  }

  .pay-bank-group li {
    float: left;
    margin-bottom: 16px;
    margin-right: 17px;
  }
  .pay-bank-group li:nth-of-type(5),.pay-bank-group li:nth-of-type(10) {
    /*float: left;*/
    /*margin-bottom: 0;*/
    margin-right: 0;
  }

  .pay-bank-img {
    width: 208px;
    height: 72px;
    border: 1px solid #E0E0E0;
    cursor: pointer;
  }

  .pay-bank-img:hover {
    border: 1px solid #f40;
  }

  .pay-bank-img img {
    width: 100%;
    height: 100%;
  }

  .pay-bank-select {
    border: 1px solid #f40;
  }

  .pay-bank-btn {
    width: 160px;
    height: 48px;
    margin-top: 17px;
    padding-bottom: 40px;
    /*margin-bottom: 40px;*/
    position: relative;
  }

  .pay-bank-btn > button {
    position: absolute;
    left: 976px;
    width: 140px;
    height: 48px;
    background: #FF600A;
    color: #fff;
    font-size: 16px;
    border: 0;
    cursor: pointer;
  }

  .pay-bank-btn > button:disabled {
    /*background-color: #DFDFDF;*/
    cursor: not-allowed;
  }
</style>
